/* stylelint-disable at-rule-no-unknown */
@import "../../../style/default";

/* apes-index start */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: $primary-color;
  z-index: 9999;
  transition: opacity .65s
}

.preloader-hidden-add {
  opacity: 1;
  display: block
}

.preloader-hidden-add-active {
  opacity: 0
}

.preloader-hidden {
  display: none
}

.cs-loader {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}

.cs-loader-inner {
  transform: translateY(-50%);
  top: 50%;
  position: absolute;
  width: 100%;
  color: #fff;
  text-align: center
}

.cs-loader-inner label {
  font-size: 20px;
  opacity: 0;
  display: inline-block
}

@keyframes lol {
  0% {
    opacity: 0;
    transform: translateX(-300px)
  }
  33% {
    opacity: 1;
    transform: translateX(0)
  }
  66% {
    opacity: 1;
    transform: translateX(0)
  }
  100% {
    opacity: 0;
    transform: translateX(300px)
  }
}

.cs-loader-inner label:nth-child(6) {
  animation: lol 3s infinite ease-in-out
}

.cs-loader-inner label:nth-child(5) {
  animation: lol 3s .1s infinite ease-in-out
}

.cs-loader-inner label:nth-child(4) {
  animation: lol 3s .2s infinite ease-in-out
}

.cs-loader-inner label:nth-child(3) {
  animation: lol 3s .3s infinite ease-in-out
}

.cs-loader-inner label:nth-child(2) {
  animation: lol 3s .4s infinite ease-in-out
}

.cs-loader-inner label:nth-child(1) {
  animation: lol 3s .5s infinite ease-in-out
}

/* apes-index end */

/* apes-index-tv start */

@-webkit-keyframes spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0)
  }
  100% {
    -moz-transform: rotate(360deg)
  }
}

@keyframes spin {
  0% {
    transform: rotate(0)
  }
  100% {
    transform: rotate(360deg)
  }
}

.spinner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000b16;
  overflow: hidden;
  z-index: 9999;
  transition: opacity .65s
}

.spinner div:first-child {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  box-shadow: 5px 5px 3px 1px #d63935;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  animation: spin 2s linear infinite;
}

.spinner div:first-child:after, .spinner div:first-child:before {
  content: '';
  position: absolute;
  border-radius: 50%
}

.spinner div:first-child:before {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  /* width: 150px; */
  /* height: 150px; */
  box-shadow: 5px 5px 3px 1px #65b57a;
  animation: spin 1.5s linear infinite;
}

.spinner div:first-child:after {
  top: 20px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  /* width: 120px; */
  /* height: 120px; */
  box-shadow: 5px 5px 3px 1px #0296d4;
  animation: spin 3s linear infinite;
}

.blob {
  //background: yellow;
  /* width: 102px; */
  /* height: 100px; */
  display: block;
  border-radius: 50%;
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 30px;
  right: 30px;
  box-shadow: 5px 5px 3px 1px yellow;
  /* border: 4px solid yellow; */
  animation: spin 1s linear infinite;
}

/* apes-index-tv end */

.cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000;
}

.cdk-overlay-backdrop {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  //-webkit-tap-highlight-color: transparent;
  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
  opacity: 0;
  position: absolute;
  pointer-events: auto;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

@mixin box-shadow-left() {
  .apes-table-th-right-sticky, .apes-table-td-right-sticky {
    box-shadow: -6px 0 6px 0 rgba(0, 0, 0, .05);
  }
}

@mixin box-shadow-right() {
  .apes-table-th-left-sticky, .apes-table-td-left-sticky {
    box-shadow: 6px 0 6px 0 rgba(0, 0, 0, .05);
  }
}

@mixin border-left() {
  .apes-table-th-right-sticky, .apes-table-td-right-sticky {
    border-right: $border-width-base $border-style-base $border-color-split;
  }
}

@mixin border-right() {
  .apes-table-th-left-sticky, .apes-table-td-left-sticky {
    border-left: $border-width-base $border-style-base $border-color-split;
  }
}

.apes-table-td-right-sticky + .apes-table-td-right-sticky {
  box-shadow: none;
}

.apes-table-th-right-sticky + .apes-table-th-right-sticky {
  box-shadow: none;
}

.apes-table-th-left-sticky, .apes-table-th-right-sticky, .apes-table-td-right-sticky, .apes-table-td-left-sticky {
  position: sticky;
  z-index: 1;
}

.apes-table-td-left-sticky, .apes-table-td-right-sticky {
  background: $component-background;
}

.apes-table-scroll-position-middle {
  @include box-shadow-right;
  @include box-shadow-left;
}

.apes-table-scroll-position-left {
  @include box-shadow-left;
}

.apes-table-scroll-position-right {
  @include box-shadow-right;
}

.apes-table-bordered {
  &.apes-table-scroll-position-middle {
    @include border-right;
    @include border-left;
  }

  &.apes-table-scroll-position-left {
    @include border-left;
  }

  &.apes-table-scroll-position-right {
    @include border-right;
  }
}

// hack tree css
.apes-tree {
  &.apes-tree-show-line {
    > apes-tree-node:not(:last-child), .apes-tree-child-tree > apes-tree-node:not(:last-child) {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 1px solid $border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }
    .apes-tree-child-tree > apes-tree-node:last-child {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 0 solid $border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }
  }
  .font-highlight {
    color: $highlight-color;
  }
}
